<template>
  <div>
    <button @click="handleNum">{{ num }}---{{ num1 }}</button>
    <h1 @click="handleMsg">{{ msg }}</h1>
    <h2>{{ msg.split('').reverse().join('') }}</h2>
    <h1>{{ reMsg }}</h1>
  </div>
</template>

<script setup>
// setup 组合式API环境申明   一切皆函数
import { ref,computed, watch , onMounted, onUpdated,} from 'vue';

// 数据、方法、计算属性、watch、生命周期
// 逻辑关注点1
let num = 10   //普通数据，数据的修改不能自动更新视图
const num1 = ref(6) //1. 响应式数据，数据变化会自动引发视图更新，替代data
const handleNum = function(){ //2. 方法函数，替代methods
  num++
  console.log('普通数据',num);
  num1.value++
  console.log('响应式数据',num1);
}

// 逻辑关注点2
const msg = ref('Hello')
const reMsg = computed(()=>{ //3. 计算属性
  // 复杂逻辑
  return msg.value.split('').reverse().join('')
})
const handleMsg = ()=>{
  msg.value = '你走'
}

watch(num1,()=>{ // 4. 数据监听
  console.log('检测到了数字变化');
})

// 5.生命周期，setup环境可以直接替代created
// setup中剔除了beforeCreate、created两个生命周期
console.log('setup环境初始化了');
onMounted(()=>{
  console.log('视图渲染完毕');
})
onUpdated(()=>{
  console.log('视图更新完毕');
})
</script>

<style lang="scss" scoped>

</style>